import React, { Component, useState, useEffect } from 'react';
import {View} from '@tarojs/components';

let mask = {
	position: "fixed",
	top: 0,
	left: 0,
    width: "100%",
    height: 0,
    background: "rgba(0, 0, 0, .3)",
    zIndex: 2000
};

export default function MaskLayer(props) {
	const [maskStyle, setMaskStyle] = useState(mask);
	const { visible } = props;

	useEffect(() => {
		let heightObj = {height: maskStyle.height};
		
		if(visible) {
			heightObj.height = "100%";
		}else {
			heightObj.height = 0;
		}
		
		const tempObj = Object.assign({}, maskStyle, heightObj);
		setMaskStyle(tempObj);
	}, [visible])

	return (
		<View style={maskStyle} onClick={this.props.hideOptionPannel}></View>
	)
}